import * as React from 'react'
import './index.less'
import { Switch,Button} from 'antd';
interface Props {
}
interface State {
    flag: boolean
}
export default class Badge extends React.Component<Props, State>{
    constructor(props: any) {
        super(props)
        this.state = {
            flag: false
        }
        if (chrome && chrome.storage) {
            let self = this;
            chrome.storage.sync.get(['flag'], function (result) {
                if (result && result.flag) {
                    self.setState({
                        flag: String(result.flag) === "true" ? true : false
                    })
                }
            });
        }
        this.sotrage = this.sotrage.bind(this);
        this.handleCheck = this.handleCheck.bind(this);
    }
    handleCheck = () => {
        this.setState({
            flag: !this.state.flag
        })
        setTimeout(() => {
            this.sotrage()
        }, 0);
    }
    sotrage = () => {
        if (chrome && chrome.storage) {
            chrome.storage.sync.set({ flag: this.state.flag }, function () { });
            chrome.runtime.sendMessage({ type: "flag", data: this.state.flag }, function (response) {
                console.log(response)
            })
        }
    }
    render() {
        return (
            <div className="menuSwitch">
               {/* <Switch checked={this.state.flag} onChange={() => {
                            this.handleCheck()
                }}></Switch> */}
                <Button onClick= {() => { this.handleCheck() }} >切换</Button>
            </div>
        )
    }
}
